//index =>处理耦合
//lodadata 加载数据
//render 渲染
import { Load } from "./loaddata.js";
import { Render } from "./render.js";
import { Carts }  from "./carts.js";

class Wtj {
   
    init() {
        this.carts = new Carts();
        //数据写入元素
        let wrapper = $(".banner .swiper-container .swiper-wrapper");
        let good_list = $(".goods-rec .w1200");
        let pic_box = $(".fashioner .pic-box");
        let user_show = $(".user-show");
        let inspiration = $(".inspiration-rec .w1200");
        let wrapper2 = $(".hot-brand .swiper-container .swiper-wrapper");

        //事件绑定元素
      
        let pics = $(".pic-box");
        let big_box = $(".goods-rec .big-box");

        //变量存储
        let timer = null;
        let temp = this;

        // 请求数据
        new Load().init()
            .then((function (res) {
                console.log(res);
                // console.log(this);
                this.cash = res.data.goods_list_one;
                let html1 = new Render().renderBanner(res.data.banner_one);
                let html2 = new Render().renderGoodsRec(res.data.goods_list_one);
                let html3 = new Render().renderFashinerImg(res.data.fashioner_list);
                let html4 = new Render().renderFashinerUser(res.data.fashioner_user_list);
                let html5 = new Render().renderInspiration(res.data.inspiration_list);
                let html6 = new Render().renderBannerTwo(res.data.banner_two);
                let html7 = new Render().renderGoodFloat(res.data.goods_list_one);
                wrapper.html(html1);
                big_box.html(html7);
                good_list.html(good_list.html() + html2);
                pic_box.html(html3);
                user_show.html(html4);
                inspiration.html(inspiration.html() + html5);
                wrapper2.html(html6);
                temp.startBanner();



                this.carts.init();
                this.carts.add(this.callRenCartList.bind(this),"render_list");

            }).bind( this))
            .then($.proxy(function () {

                let close_btn = $(".close");
                let login_board = $(".login-ifranmes");

                let register_btn = $(".register-in");
                let login_btn = $(".login-in");
                //显示注册;
                register_btn.on("click", $.proxy(function () {
                    login_board.children().eq(1).attr("src", "http://localhost/wuTuoJia_project/src/html/register.html");
                    login_board.addClass("login-show");
                    $("body").parent().css("overflow-y", "hidden");
                }, temp))

                //显示登录;
                login_btn.on("click", $.proxy(function () {
                    login_board.children().eq(1).attr("src", "http://localhost/wuTuoJia_project/src/html/login.html");
                    login_board.addClass("login-show");
                    $("body").parent().css("overflow-y", "hidden");
                }, temp))

                //隐藏界面;
                close_btn.on("click", $.proxy(function () {
                    login_board.removeClass("login-show");
                    $("body").parent().css("overflow-y", "auto");
                }, temp))
                let board = $(".msg-board");
                
                let btns = $(".menu-buttons");
                var timer = null;
                // 延时菜单
                btns.on("mouseenter",".name",function(evt){
                    
                  for(let i = 0;i < board.length;i++ )
                  {
                    board.eq(i).removeClass("show-board");
                  }
                  $(evt.target).next().addClass("show-board");
                })

                btns.on("mouseleave",".name",function(evt){
                    timer = setTimeout(() => {
                        $(evt.target).next().removeClass("show-board");
                    }, 1000);
                    for(let i = 0 ; i < board.length ; i++){
                        board.eq(i).on("mouseover",function(evt){
                            $(this).addClass("show-board");
                            clearTimeout(timer);
                            console.log(evt.target);
                        })
                    }
                  })
                  for(let i = 0 ; i < board.length ; i++){
                    board.eq(i).on("mouseout",function(evt){
                        $(this).removeClass("show-board");
                    })
                }
                //推荐商品效果
                //  big_box.on("mouseover",".show-box", $.proxy(temp.showBox, temp));
                let show_box = $(".show-box");

                show_box.on("mouseover", "img", $.proxy(temp.showBox, temp));
                show_box.on("mouseout", "img", $.proxy(temp.hideBox, temp));

                //跳转详情页
                show_box.on("click", "img", $.proxy(temp.jumpPage, this))


                //达人活动面板
                pics.on("mouseover", ".pic", $.proxy(temp.handlerOver, temp));


            }, this))

    }

    //启动banner
    startBanner() {
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                disableOnInteraction: false,
            },

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },


        })
        new Swiper('.container', {
            loop: true,
            autoplay: {
                disableOnInteraction: false,
            },

            navigation: {
                nextEl: '.next',
                prevEl: '.prev',
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true
            }
        })
    }

    //推荐商品效果
    showBox(evt) {
        let big_box = $(".goods-rec .big-box");
        for (let i = 0; i < big_box.children().length; i++) {
            big_box.children().eq(i).removeClass("active");
        }
        evt.target.parentNode.parentNode.className += " active";
        let msg_box = $(".msg-box");
        msg_box.animate({
            height: 180,
        })
    }


    hideBox() {
        let big_box = $(".goods-rec .big-box");
        for (let i = 0; i < big_box.children().length; i++) {
            big_box.children().eq(i).removeClass("active");
        }
        let msg_box = $(".msg-box");
        for (let i = 0; i < msg_box.length; i++) {
            msg_box.eq(i).removeAttr("style");
        }

    }


    //跳转页面
    jumpPage(evt){
        let data_hash = $(evt.target).attr("good_id")+"#"+$(evt.target).attr("price");
        location.href="http://localhost/wuTuoJia_project/src/html/details.html#"+data_hash;
    }
    //达人活动面板效果
    handlerOver(evt) {
        let index = Array.from(evt.target.parentNode.parentNode.children).indexOf(evt.target.parentNode);
        let users = $(".user-show");
        let arrow = $(".arrow");
        let left_value = index * 300 + 155;
        //面板的显示
        for (let i = 0; i < users.children().length; i++) {
            users.children().eq(i).removeClass("active");
        }
        users.children().eq(index).addClass("active");

        //箭头的移动;
        arrow.animate({
            left: left_value,
        })

    }

//    调用渲染购物车列表函数
    callRenCartList(){
         console.log(this);
         let carts_list = $(".carts-list .goods-list");
         console.log(carts_list);
         let html =   new Render().renderCartsList(this.cash);
         carts_list.html(html);
    }

}

export default new Wtj();